<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Rank, Setting } from '@element-plus/icons-vue'
import { VxeColumn, VxeTable } from 'vxe-table'
import Sortable, { type SortableEvent } from 'sortablejs'

// 列配置接口
interface ColumnConfig {
  field: string
  title: string
  visible: boolean
  width: number
  align: 'left' | 'center' | 'right'
  fixed: 'left' | 'right' | 'none'
  sortable?: boolean
  type?: string
  color?: string
  textColor?: string
  sortIndex: number
}

// 默认列配置（用于恢复默认）
const defaultColumnConfigs: ColumnConfig[] = [
  {
    field: 'checkbox',
    title: '选择列',
    visible: true,
    width: 50,
    align: 'center',
    type: 'checkbox',
    fixed: 'left',
    sortIndex: 1,
    color: '',
    textColor: '',
  },
  {
    field: 'seq',
    title: '序号',
    visible: true,
    width: 50,
    align: 'center',
    type: 'seq',
    fixed: 'left',
    sortIndex: 2,
    color: '',
    textColor: '',
  },
  {
    field: 'entryRegisterNo',
    title: '入园单号',
    visible: true,
    width: 180,
    align: 'center',
    fixed: 'left',
    sortIndex: 3,
    color: '',
    textColor: '',
  },
  {
    field: 'entryTime',
    title: '入园时间',
    visible: true,
    width: 180,
    align: 'center',
    sortable: true,
    fixed: 'left',
    sortIndex: 4,
    color: '',
    textColor: '',
  },
  {
    field: 'outTime',
    title: '离园时间',
    visible: true,
    width: 150,
    align: 'center',
    sortable: true,
    fixed: 'left',
    sortIndex: 5,
    color: '',
    textColor: '',
  },
  {
    field: 'status',
    title: '状态',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 6,
    color: '',
    textColor: '',
  },
  {
    field: 'sourceSettingId',
    title: '关联单据',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 7,
    color: '',
    textColor: '',
  },
  {
    field: 'images',
    title: '图片',
    visible: true,
    width: 180,
    align: 'left',
    fixed: 'none',
    sortIndex: 8,
    color: '',
    textColor: '',
  },
  {
    field: 'driverName',
    title: '司机姓名',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 9,
    color: '',
    textColor: '',
  },
  {
    field: 'driverPhone',
    title: '司机电话',
    visible: true,
    width: 150,
    align: 'center',
    fixed: 'none',
    sortIndex: 10,
    color: '',
    textColor: '',
  },
  {
    field: 'vehicleLicensePlate',
    title: '车牌号',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 11,
    color: '',
    textColor: '',
  },
  {
    field: 'bak5',
    title: '车辆净重',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 12,
    color: '',
    textColor: '',
  },
  {
    field: 'roughWeight',
    title: '车辆毛重',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 13,
    color: '',
    textColor: '',
  },
  {
    field: 'tare',
    title: '车辆皮重',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 14,
    color: '',
    textColor: '',
  },
  {
    field: 'bak1',
    title: '粮食',
    visible: true,
    width: 100,
    align: 'center',
    fixed: 'none',
    sortIndex: 15,
    color: '',
    textColor: '',
  },
  {
    field: 'turnLot',
    title: '批文',
    visible: true,
    width: 170,
    align: 'center',
    fixed: 'none',
    sortIndex: 16,
    color: '',
    textColor: '',
  },
  {
    field: 'frontNo',
    title: '上游单据',
    visible: true,
    width: 250,
    align: 'center',
    fixed: 'none',
    sortIndex: 17,
    color: '',
    textColor: '',
  },
]

// 表格列配置（扁平化结构）
const columnConfigs = reactive<ColumnConfig[]>(defaultColumnConfigs.map((col) => ({ ...col })))

// 表格设置对话框显示状态
const showTableSettings = ref(false)

// 拖拽排序实例
let sortableInstance: Sortable | null = null

// 表格重新渲染key
const tableKey = ref(0)

// 初始化拖拽排序
const initSortable = () => {
  nextTick(() => {
    const el = document.querySelector('.sortable-list')
    if (el && !sortableInstance) {
      sortableInstance = Sortable.create(el as HTMLElement, {
        handle: '.col-drag', // 只允许通过拖拽图标区域触发拖拽
        animation: 200, // 减少动画时间，让交换更快
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',
        // 启用自动滚动功能
        scroll: true,
        scrollSensitivity: 30, // 滚动敏感度（像素）
        scrollSpeed: 20, // 滚动速度
        bubbleScroll: true, // 允许滚动到父级容器
        // 优化拖拽性能
        forceFallback: false, // 使用HTML5原生拖拽
        fallbackTolerance: 0, // 减少容差
        dragoverBubble: false, // 减少冒泡事件
        // 拖拽开始时的处理
        onStart: () => {
          // 添加拖拽活动状态
          const sortableList = document.querySelector('.sortable-list')
          if (sortableList) {
            sortableList.classList.add('sortable-drag-active')
          }
        },
        onEnd: (evt: SortableEvent) => {
          // 移除拖拽活动状态
          const sortableList = document.querySelector('.sortable-list')
          if (sortableList) {
            sortableList.classList.remove('sortable-drag-active')
          }
          if (evt.oldIndex !== undefined && evt.newIndex !== undefined) {
            // 创建新的数组来触发响应式更新
            const newColumnConfigs = [...columnConfigs]
            const [movedItem] = newColumnConfigs.splice(evt.oldIndex, 1)
            newColumnConfigs.splice(evt.newIndex, 0, movedItem)

            // 更新sortIndex
            newColumnConfigs.forEach((item, index) => {
              item.sortIndex = index + 1
            })

            // 清空并重新填充数组以触发响应式更新
            columnConfigs.splice(0, columnConfigs.length, ...newColumnConfigs)

            // 触发表格重新渲染
            tableKey.value++
          }
        },
      })
    }
  })
}

// 销毁拖拽排序实例
const destroySortable = () => {
  if (sortableInstance) {
    sortableInstance.destroy()
    sortableInstance = null
  }
}

// 打开设置对话框
const openSettings = () => {
  showTableSettings.value = true
  initSortable()
}

// 关闭设置对话框
const closeSettings = () => {
  showTableSettings.value = false
  destroySortable()
}

// 处理颜色变化
const handleColorChange = (column: ColumnConfig, color: string) => {
  column.color = color
}

// 处理字体颜色变化
const handleTextColorChange = (column: ColumnConfig, color: string) => {
  column.textColor = color
  tableKey.value++
}

// 处理固定列变化
const handleFixedChange = () => {
  // 触发表格重新渲染
  tableKey.value++
}

// 恢复默认配置
const restoreDefault = () => {
  columnConfigs.splice(0, columnConfigs.length, ...defaultColumnConfigs.map((col) => ({ ...col })))
  tableKey.value++
}

// 组件挂载时初始化
onMounted(() => {
  // 按sortIndex排序
  columnConfigs.sort((a, b) => a.sortIndex - b.sortIndex)
})

// 获取所有可见的列配置（按sortIndex排序）
const getVisibleColumns = () => {
  return columnConfigs.filter((col) => col.visible).sort((a, b) => a.sortIndex - b.sortIndex)
}

const entryRegistrationList = ref([
  {
    id: '1952023186307710977',
    entryRegisterNo: 'ER0522508030001',
    status: '1',
    driverName: '许红林',
    driverIdCard: '530324198712200535',
    driverPhone: '15974628609',
    vehicleLicensePlate: '云AM1198',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-03 23:05:56',
    outTime: '2025-08-04 08:30:15',
    frontNo: 'M25044-1-1-1',
    behindNo: 'PIW05220250803001',
    bak1: '2360000',
    imageCount: '0',
    listCount: '0',
    behindId: '1952023192762744834',
    turnLot: 'CLF0124GZ05ZC78',
  },
  {
    id: '1951095132320374785',
    entryRegisterNo: 'ER0522508010004',
    status: '1',
    driverName: '王忠',
    driverIdCard: '352202197011275710',
    driverPhone: '13706021361',
    vehicleLicensePlate: '万218',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-01 09:38:00',
    outTime: '2025-08-01 14:20:30',
    frontNo: '011A171101-1-1-1',
    behindNo: 'PIW05220250801004',
    bak1: '1110000',
    bak5: '998000.000000',
    imageCount: '0',
    listCount: '1',
    behindId: '1951095158836764673',
    roughWeight: '998000.000',
    tare: '0.000',
    suttle: '998000.000',
    turnLot: 'GZPX22002',
  },
  {
    id: '1951089497226813441',
    entryRegisterNo: 'ER0522508010003',
    status: '1',
    driverName: '郭红林',
    driverIdCard: '530424198705100013',
    driverPhone: '19987710878',
    vehicleLicensePlate: '云AJ2119',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-01 09:14:32',
    outTime: '2025-08-01 16:45:12',
    frontNo: '011A171101-1-1-1',
    behindNo: 'PIW05220250801003',
    bak1: '1110000',
    bak5: '1000.000000',
    imageCount: '0',
    listCount: '1',
    behindId: '1951089509625176066',
    roughWeight: '1000.000',
    tare: '0.000',
    suttle: '1000.000',
    turnLot: 'GZPX22002',
  },
])
const styles = ['success', 'danger', 'info', 'warning', 'danger', 'danger', 'danger', 'danger']
</script>

<template>
  <div class="table-container">
    <!-- 表格设置按钮 -->
    <div class="table-toolbar">
      <el-button type="primary" @click="openSettings">
        <el-icon>
          <Setting />
        </el-icon>
        表格设置
      </el-button>
    </div>

    <div class="table-content" :class="{ 'with-settings': showTableSettings }">
      <!-- 动态表格 -->
      <div class="table-main">
        <vxe-table
          :key="tableKey"
          :data="entryRegistrationList"
          border
          show-overflow
          align="center"
          :row-config="{ height: 35 }"
          height="500px"
          :header-cell-style="
            ({ column }) => {
              const colConfig = columnConfigs.find((col) => col.field === column.field)
              const style: any = {}
              if (colConfig?.color) {
                style.backgroundColor = colConfig.color
              }
              if (colConfig?.textColor) {
                style.color = colConfig.textColor
              }
              return Object.keys(style).length > 0 ? style : undefined
            }
          "
          :cell-style="
            ({ column }) => {
              const colConfig = columnConfigs.find((col) => col.field === column.field)
              return colConfig?.textColor ? { color: colConfig.textColor } : undefined
            }
          "
        >
          <!-- 动态生成列 -->
          <template v-for="col in getVisibleColumns()" :key="col.field">
            <!-- 选择列 -->
            <vxe-column
              v-if="col.type === 'checkbox'"
              type="checkbox"
              :width="col.width"
              :fixed="col.fixed === 'none' ? null : col.fixed"
              :field="col.field"
            />
            <!-- 序号列 -->
            <vxe-column
              v-else-if="col.type === 'seq'"
              type="seq"
              :title="col.title"
              :width="col.width"
              :fixed="col.fixed === 'none' ? null : col.fixed"
              :field="col.field"
            />
            <!-- 图片列 -->
            <vxe-column
              v-else-if="col.field === 'images'"
              :title="col.title"
              :width="col.width"
              :align="col.align"
              header-align="center"
            >
              <template #default="{ row }">
                <span style="color: #999; font-weight: 400; margin: 0 5px">
                  ({{ row.imageCount ?? 0 }}/11)
                </span>
                <span style="color: #999; font-weight: 400"> ({{ row.listCount ?? 0 }}/1) </span>
              </template>
            </vxe-column>
            <!-- 状态列 -->
            <vxe-column
              v-else-if="col.field === 'status'"
              :title="col.title"
              :field="col.field"
              :width="col.width"
              :align="col.align"
              :sortable="col.sortable"
              :fixed="col.fixed === 'none' ? null : col.fixed"
            >
              <template #default="{ row }">
                <el-tag type="success">{{ row.status }}</el-tag>
              </template>
            </vxe-column>
            <!-- 关联单据列 -->
            <vxe-column
              v-else-if="col.field === 'sourceSettingId'"
              :title="col.title"
              :field="col.field"
              :width="col.width"
              :align="col.align"
            >
              <template #default="{ row }">
                <el-tag type="success">{{ row.sourceSettingId }}</el-tag>
              </template>
            </vxe-column>
            <!-- 重量列（需要格式化） -->
            <vxe-column
              v-else-if="['bak5', 'roughWeight', 'tare'].includes(col.field)"
              :title="col.title"
              :field="col.field"
              :width="col.width"
              :align="col.align"
            >
              <template #default="{ row }">
                <span>{{ row[col.field] ? parseInt(row[col.field]) : '-' }}</span>
              </template>
            </vxe-column>
            <!-- 粮食列 -->
            <vxe-column
              v-else-if="col.field === 'bak1'"
              :title="col.title"
              :field="col.field"
              :width="col.width"
              :align="col.align"
            >
              <template #default="{ row }">
                <el-tag type="success">{{ row.bak1 }}</el-tag>
              </template>
            </vxe-column>
            <!-- 批文列 -->
            <vxe-column
              v-else-if="col.field === 'turnLot'"
              :title="col.title"
              :width="col.width"
              :align="col.align"
            >
              <template #default="{ row }">
                <el-tag
                  v-for="(item, index) in (row.turnLot || '').split(',')"
                  :type="styles[index]"
                  :key="index"
                >
                  {{ item }}
                </el-tag>
              </template>
            </vxe-column>
            <!-- 上游单据列 -->
            <vxe-column
              v-else-if="col.field === 'frontNo'"
              :title="col.title"
              :width="col.width"
              :align="col.align"
            >
              <template #default="{ row }">
                <el-tag
                  v-for="(item, index) in (row.frontNo || '').split(',')"
                  :type="styles[index]"
                  :key="index"
                >
                  {{ item }}
                </el-tag>
              </template>
            </vxe-column>
            <!-- 普通列 -->
            <vxe-column
              v-else
              :title="col.title"
              :field="col.field"
              :width="col.width"
              :align="col.align"
              :sortable="col.sortable"
              :fixed="col.fixed === 'none' ? null : col.fixed"
            />
          </template>
        </vxe-table>
      </div>

      <!-- 表格设置对话框 -->
      <el-dialog
        v-model="showTableSettings"
        title="表格设置"
        width="90%"
        @close="closeSettings"
        :close-on-click-modal="false"
      >
        <div class="settings-container">
          <div class="settings-header">
            <div class="header-info">
              <el-icon class="animated-icon">
                <Rank />
              </el-icon>
              <span>拖拽列表项可以改变排序</span>
            </div>
          </div>
          <div class="settings-table">
            <div class="table-header">
              <div class="col-drag"></div>
              <div class="col-name">列名</div>
              <div class="col-visible">显示</div>
              <div class="col-width">宽度</div>
              <div class="col-align">对齐</div>
              <div class="col-fixed">固定</div>
              <div class="col-color">背景色</div>
              <div class="col-text-color">字体色</div>
            </div>
            <div class="sortable-list">
              <div
                v-for="col in columnConfigs"
                :key="col.field"
                class="column-item"
                :data-id="col.field"
              >
                <div class="col-drag">
                  <el-icon class="drag-handle">
                    <Rank />
                  </el-icon>
                </div>
                <div class="col-name">
                  <span class="sort-index">{{ col.sortIndex }}</span>
                  <el-input
                    v-model="col.title"
                    size="small"
                    style="width: calc(100% - 20px)"
                    @blur="tableKey++"
                  />
                </div>
                <div class="col-visible">
                  <el-switch v-model="col.visible" size="small" />
                </div>
                <div class="col-width">
                  <el-input-number
                    v-model="col.width"
                    :min="50"
                    :max="500"
                    :step="10"
                    size="small"
                    controls-position="right"
                  />
                </div>
                <div class="col-align">
                  <el-radio-group v-model="col.align" size="small">
                    <el-radio-button label="left">左</el-radio-button>
                    <el-radio-button label="center">中</el-radio-button>
                    <el-radio-button label="right">右</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="col-fixed">
                  <el-select
                    v-model="col.fixed"
                    size="small"
                    placeholder="选择固定"
                    @change="handleFixedChange"
                  >
                    <el-option label="不固定" value="none" />
                    <el-option label="左固定" value="left" />
                    <el-option label="右固定" value="right" />
                  </el-select>
                </div>
                <div class="col-color">
                  <el-color-picker
                    v-model="col.color"
                    size="small"
                    show-alpha
                    :predefine="[
                      '#f0f9ff',
                      '#fefce8',
                      '#f0fdf4',
                      '#fef7ff',
                      '#fff7ed',
                      '#f8fafc',
                      '#ecfdf5',
                      '#fef3c7',
                      '#ddd6fe',
                      '#fed7d7',
                    ]"
                    @change="(color: string) => handleColorChange(col, color)"
                  />
                </div>
                <div class="col-text-color">
                  <el-color-picker
                    v-model="col.textColor"
                    size="small"
                    show-alpha
                    :predefine="[
                      '#000000',
                      '#333333',
                      '#666666',
                      '#999999',
                      '#ff4d4f',
                      '#52c41a',
                      '#1890ff',
                      '#722ed1',
                      '#fa8c16',
                      '#eb2f96',
                    ]"
                    @change="(color: string) => handleTextColorChange(col, color)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="restoreDefault" style="margin-right: auto">恢复默认</el-button>
            <el-button @click="closeSettings">取消</el-button>
            <el-button type="primary" @click="closeSettings">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table-container {
  margin: 20px;

  .table-toolbar {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
  }

  .table-main {
    min-width: 0;
  }
}

// 表格列头颜色样式
:deep(.column-header) {
  padding: 8px;
  border-radius: 4px;
  font-weight: 500;
}

// 对话框设置样式
.settings-container {
  .settings-header {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #409eff;

    .header-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #606266;
      font-size: 14px;

      .animated-icon {
        color: #409eff;
        animation: gentle-bounce 2s infinite;

        @keyframes gentle-bounce {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-2px);
          }
        }
      }
    }
  }

  .settings-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .table-header {
      display: grid;
      grid-template-columns: 40px 2fr 80px 120px 180px 120px 120px 120px;
      gap: 12px;
      padding: 12px 16px;
      padding-right: 32px; /* 为滚动条预留空间 */
      background: #f5f7fa;
      font-weight: 500;
      color: #606266;
      font-size: 14px;
      text-align: center;
      flex-shrink: 0;

      .col-name {
        text-align: center;
      }
    }

    .sortable-list {
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;

      /* 拖拽时的背景提示 */
      &.sortable-drag-active {
        background: radial-gradient(circle at center, rgba(64, 158, 255, 0.02) 0%, transparent 70%);
      }

      /* 自定义滚动条样式 */
      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;

        &:hover {
          background: #a8a8a8;
        }
      }

      .column-item {
        display: grid;
        grid-template-columns: 40px 2fr 80px 120px 180px 120px 120px 120px;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background: transparent;
          transition: all 0.3s ease;
          border-radius: 0 2px 2px 0;
        }

        &:hover {
          background: linear-gradient(135deg, #fafbff 0%, #f0f9ff 100%);
          transform: translateX(2px);
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);

          &::before {
            background: linear-gradient(to bottom, #409eff, #1890ff);
            width: 4px; /* hover时稍微变宽 */
          }
        }

        &:last-child {
          border-bottom: none;
        }

        .col-drag {
          display: flex;
          align-items: center;
          justify-content: center;

          .drag-handle {
            color: #c0c4cc;
            font-size: 23px;
            cursor: grab;
            transition: all 0.2s ease;
            padding: 4px;
            border-radius: 4px;

            &:hover {
              color: #409eff;
              background: #f0f9ff;
              transform: scale(1.1);
            }

            &:active {
              cursor: grabbing;
              transform: scale(0.95);
              background: #e6f7ff;
            }
          }
        }

        .col-name {
          display: flex;
          align-items: center;
          color: #606266;
          gap: 8px;

          .sort-index {
            background: #e6f7ff;
            color: #1890ff;
            padding: 2px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            width: 30px;
            text-align: center;
          }
        }

        .col-visible,
        .col-width,
        .col-align,
        .col-fixed,
        .col-color,
        .col-text-color {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .col-width {
          :deep(.el-input-number) {
            width: 100px;

            .el-input__inner {
              text-align: center;
            }
          }
        }

        .col-align {
          :deep(.el-radio-group) {
            .el-radio-button__inner {
              padding: 4px 8px;
              font-size: 12px;
            }
          }
        }

        .col-fixed {
          :deep(.el-select) {
            width: 100px;

            .el-input__inner {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

// 拖拽状态样式
.sortable-ghost {
  position: relative;
  opacity: 0.3;
  background: transparent;
  border: none;
  transform: scale(0.95);
  border-radius: 6px;

  /* 创建明显的插入位置指示器 */
  &::before {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    top: -2px;
    height: 4px;
    background: linear-gradient(90deg, #409eff, #1890ff, #409eff);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
    animation: ghost-pulse 1s ease-in-out infinite alternate;
  }

  &::after {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -2px;
    height: 4px;
    background: linear-gradient(90deg, #409eff, #1890ff, #409eff);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
    animation: ghost-pulse 1s ease-in-out infinite alternate;
  }

  @keyframes ghost-pulse {
    0% {
      opacity: 0.6;
      transform: scaleY(1);
    }
    100% {
      opacity: 1;
      transform: scaleY(1.2);
    }
  }
}

.sortable-chosen {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border: 1px solid #409eff;
  border-radius: 6px;
  transform: scale(1.02);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  cursor: grab;

  /* 恢复外部光圈效果 */
  &::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #409eff, #1890ff, #409eff, #1890ff);
    border-radius: 8px;
    z-index: -1;
    animation: chosen-glow 2s linear infinite;
  }

  @keyframes chosen-glow {
    0% {
      opacity: 0.4;
      background-size: 200% 200%;
      background-position: 0% 0%;
    }
    50% {
      opacity: 0.6;
      background-position: 100% 100%;
    }
    100% {
      opacity: 0.4;
      background-size: 200% 200%;
      background-position: 0% 0%;
    }
  }
}

.sortable-drag {
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(64, 158, 255, 0.4);
  border-radius: 8px;
  transform: scale(1.03); /* 移除旋转，减少抖动 */
  border: 1px solid #409eff;
  cursor: grabbing;
  /* 移除transition避免拖拽抖动 */

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(64, 158, 255, 0.03) 100%);
    border-radius: 8px;
    pointer-events: none;
  }

  /* 添加拖拽时的微妙动画效果 */
  &::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
      45deg,
      rgba(64, 158, 255, 0.1) 0%,
      rgba(24, 144, 255, 0.1) 25%,
      rgba(64, 158, 255, 0.1) 50%,
      rgba(24, 144, 255, 0.1) 75%,
      rgba(64, 158, 255, 0.1) 100%
    );
    border-radius: 10px;
    animation: drag-shine 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

  @keyframes drag-shine {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.6;
    }
  }
}

// Element Plus 组件样式覆盖
:deep(.el-switch) {
  &.is-checked .el-switch__core {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}

:deep(.el-radio-group) {
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 4px 0 0 4px;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 4px 4px 0;
  }

  .el-radio-button__original-radio:checked + .el-radio-button__inner {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }
}

:deep(.el-color-picker) {
  .el-color-picker__trigger {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}

:deep(.el-dialog) {
  .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 12px 20px;
    border-top: 1px solid #e4e7ed;

    .dialog-footer {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
}
</style>
